<template>
	<view class="new-product">
		<view class="new-product-container">
			<van-cell title="首发新品" value="更多" label="多个优质商品最新上架" :border="false" is-link />
			<scroll-view :scroll-x="true">
				<view class="list">
					<navigator
						v-for="goods in goodsList"
						:key="goods.id"
						url=""
						hover-class="none"
						class="item">
						<image :src="goods.image"></image>
						<view class="info">
							<view class="name">{{ goods.store_name }}</view>
							<view class="price">￥{{ goods.price }}</view>
						</view>
					</navigator>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { homeProductList as homeProductListApi } from '@/api/home'
	import VanCell from '@/wxcomponents/vant/cell/index'
	export default {
		components: {
			VanCell
		},
		props: {
			list: {
				type: Object,
				default: () => {}
			}
		},
		data () {
			return {
				// 选择模板
				selectType: 0,
				// 商品分类
				selectId: '',
				// 按销量排序
				salesOrder: '',
				// 按新品排序
				newsOrder: '',
				// 手动选择模板时选择的商品id
				ids: '',
				// 商品类型
				type: '',
				// 获取商品的数量
				numConfig: 0,
				page: 1,
				limit: 6,
				goodsList: []
			}
		},
		watch: {
			list: {
				immediate: true,
				handler (nVal, oVal) {
					if (!nVal) {
						return false
					}
					this.selectType = nVal.tabConfig.tabVal
					this.selectId = nVal.selectConfig.activeValue
					this.type = nVal.selectSortConfig.activeValue
					this.salesOrder = nVal.goodsSort.type === 1 ? 'desc' : ''
					this.newsOrder = nVal.goodsSort.type === 2 ? 'news' : ''
					this.ids = nVal.ids ? nVal.ids.join(',') : ''
					this.numConfig = nVal.numConfig.val
					this.getNewProductList()
				}
			}
		},
		methods: {
			async getNewProductList () {
				let params = {}
				if (this.selectType) {
					params = {
						page: this.page,
						limit: this.numConfig ? this.numConfig : this.limit,
						type: this.type,
						ids: this.ids,
						selectType: this.selectType
					}
				} else {
					params = {
						page: this.page,
						limit: this.numConfig ? this.numConfig : this.limit,
						type: this.type,
						newsOrder: this.newsOrder,
						salesOrder: this.salesOrder,
						selectId: this.selectId,
						selectType: this.selectType
					}
				}
				const { status, data, msg } = await homeProductListApi(params)
				if (status === this.API_STATUS_CODE.SUCCESS) {
					this.goodsList = data
				} else {
					uni.showToast({
						icon: 'none',
						title: msg,
						duration: 3000
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.new-product {
		&-container {
			padding: 0 30rpx;
			margin: 34rpx 0 42rpx 0;
		}
		
		scroll-view {
			white-space: nowrap;
			
			.list {
				.item {
					display: inline-block;
					width: 240rpx;
					margin-right: 20rpx;
					border: 1rpx solid #eee;
					border-radius: 20rpx;
					image {
						width: 100%;
						height: 240rpx;
					}
					.info {
						padding: 20rpx 16rpx 26rpx 16rpx;
						.name {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 30rpx;
							color: #222;
						}
						.price {
							font-size: 26rpx;
							color: #fc4141;
						}
					}
				}
			}
		}
	}
</style>